<template v-if='isShow'>
  <el-upload
    class="upload-demo"
    :action="baseUrl + action"
    :multiple="false"
    :limit="limit"
    :file-list="fileList ? fileList : []"
    :on-change="uploadChange"
    :accept="accept ? accept : 'image/*'"
    :name="name ? name : 'img'"
    :data="data ? data : {}"
    :list-type="listType ? listType : 'picture-card'"
    :on-remove="remove"
    :class="{ disBtn: noneBtnDel }"
    :disabled="disabled"
    :auto-upload="autoUpload"
    ref="refUpload"
    :before-upload="beforeUpload"
    :http-request="httpRequest"
    :sefelfs="sefelfs"
    :on-progress="onSuccess"
  >
    <el-button
      size="small"
      :disabled="disabled"
      :type="btnType ? btnType : 'primary'"
      :plain="plain"
      v-if="isBtn"
      >{{ value ? value : "点击上传" }}</el-button
    >
    <div
      slot="file"
      slot-scope="{ file }"
      style="height: 100%; width: 100%"
      v-if="!listType"
    >
      <img
        class="el-upload-list__item-thumbnail"
        :src="file.url"
        alt=""
        style="height: 100%; width: 100%"
      />
      <span class="el-upload-list__item-actions">
        <span
          v-if="showPictureCard"
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
          title="放大裁剪"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
          title="删除"
        >
          <i class="el-icon-delete"></i>
        </span>
        <span
          v-if="PictureEditBackIf&&(platform('tjy'))"
          class="el-upload-list__item-delete"
          @click="PictureEditBack(file)"
          title="编辑图片背景色"
          style="font-size: 14px; color: #fff"
        >
          更换底色
        </span>
      </span>
    </div>
  </el-upload>
</template>

<script>
// import { getAdminToken, getAdminUserId } from '@/utils/auth'
import { dataURLtoFile } from "@/utils/64batatoFile";
import request from "@/utils/request";

export default {
  props: {
    // ['action','accept',"name","data",'fileList','value',"btnType",'plain','listType','isBtn']
    action: {
      type: String,
      default: "",
    },
    accept: {
      type: String,
      default: "",
    },
    name: {
      type: String,
      default: "",
    },
    data: {
      type: Object,
      default: () => ({}),
    },
    fileList: {
      type: Array,
      default: () => [],
    },
    value: {
      type: String,
      default: "",
    },
    btnType: {
      type: String,
      default: "",
    },
    plain: {
      type: Boolean,
      default: true,
    },
    listType: {
      type: String,
      default: "",
    },
    isBtn: {
      type: Boolean,
      default: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    autoUpload: {
      type: Boolean,
      default: false,
    },
    sefelfs: {
      type: String,
      default: "",
    },
    showPictureCard: {
      type: Boolean,
      default: true,
    },
    limit: {
      type: Number,
      default: 1,
    },
    PictureEditBackIf: {
      // 图片背景编辑
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      baseUrl:
        process.env.NODE_ENV === "development"
          ? process.env.VUE_APP_BASE_API
          : window.location.href.slice(
              0,
              window.location.href.indexOf("/site")
            ),
      // headers:{
      //     AdminToken:getAdminToken(),
      //     AdminUserId:getAdminUserId()
      // },
      noneBtnDel: false,
      // limit:1,
      file: {},
      autoUploadA: true,
      isYes: true,
      isShow: true,
      isFileCoWu: {}, //处理过的图片
    };
  },
  created() {
    this.noneBtnDel = this.fileList.length >= this.limit;
    // if(this.accept.indexOf('image')==-1) {
    //     this.isYes=false
    // }else{
    //     this.isYes=true
    // }
  },
  watch: {
    fileList(val) {
      this.noneBtnDel = val.length >= this.limit;
    },
    autoUpload(val) {
      console.log(val);
    },
  },
  methods: {
    uploadChange(file, fileList) {
      this.noneBtnDel = fileList.length >= this.limit;
      // if(this.accept&&this.accept.indexOf('image')==-1){
      //     this.$emit('change',file,fileList)
      // }else{
      //  console.log(file)
      // }
      this.$emit("change", file, fileList);
      if (!this.sefelfs) {
        this.$refs.refUpload.submit();
      }
    },
    onSuccess(res) {
      this.$emit("onSuccess", res);
    },
    remove(file, fileList) {
      this.noneBtnDel = fileList.length >= this.limit;
      this.$emit("remove", file, fileList);
    },
    async commitUpload() {
      if (!this.autoUpload) {
        if (this.$refs.refUpload.uploadFiles.length <= 0) {
          if (
            navigator.userAgent.match(
              /(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i
            )
          ) {
            this.$toast.fail("请上传文件后提交");
          } else {
            this.$message.error("请上传文件后提交");
          }
        } else {
          this.$refs.refUpload.submit();
          // if(this.$refs.refUpload.uploadFiles[0].status=='success'){
          //     this.$message.warning(this.$refs.refUpload.uploadFiles[0].response.msg)
          // }
        }
      }
    },

    //主动提交
    uploadImg(file) {
      this.isFileCoWu = file;
      this.$refs.refUpload.submit();
    },
    handleRemove() {
      this.noneBtnDel = false;
      this.$emit("remove");
      this.$refs.refUpload.clearFiles();
      // this.isShow=false
      // this.$nextTick(()=>{
      //     this.isShow=true
      // })
    },
    httpRequest(param) {
      let formData = new FormData();
      Object.keys(param.data).map((item) => {
        formData.append(item, param.data[item]);
      });
      if (this.accept && this.accept.indexOf("image") == -1) {
        formData.append(param.filename, param.file);

        request({
          url: this.action,
          method: "post",
          data: formData,
        })
          .then((res) => {
            let file = {
              status: "success",
              raw: param.file,
              response: res,
            };
            let fileList = [file];
            this.$emit("change", file, fileList);
          })
          .catch(() => {
            let file = {
              status: "success",
              raw: param.file,
              response: {
                code: 400,
                data: null,
                msg: "上传失败",
              },
            };
            let fileList = [file];
            this.$emit("change", file, fileList);
          });
      } else {
        let objb;
        if (this.isFileCoWu.size) {
          objb = this.isFileCoWu;
        } else {
          objb = param.file;
        }

        this.$lrz(objb, { quality: 0.8 }).then((res) => {
          let obj = dataURLtoFile(res.base64, param.file.name, param.file.type);
          // let list = [obj]
          formData.append(param.filename, obj);
          request({
            url: this.action,
            method: "post",
            data: formData,
          })
            .then((res) => {
              let file = {
                status: "success",
                raw: obj,
                response: res,
              };
              let fileList = [file];
              this.$emit("change", file, fileList);
            })
            .catch(() => {
              let file = {
                status: "success",
                raw: obj,
                response: {
                  code: 400,
                  data: null,
                  msg: "上传失败",
                },
              };
              let fileList = [file];
              this.$emit("change", file, fileList);
            });
        });
      }
    },
    clearFiles() {
      this.$refs.refUpload.clearFiles();
    },
    beforeUpload(file) {
      this.$emit("beforeUpload", file);

      // if(this.accept&&this.accept.indexOf('image')==-1){
      //     console.log(125454)
      // }else{
      //     this.$lrz(file).then(res=>{
      //         // console.log(dataURLtoFile(res.base64,file.name,file.raw.type))
      //         return new Promise((resolve,reject)=>{
      //             // this.$emit('beforeUpload',dataURLtoFile(res.base64,file.name,file.raw.type))
      //             console.log(12111,dataURLtoFile(res.base64,file.name,file.type))
      //             resolve(dataURLtoFile(res.base64,file.name,file.type))
      //         })
      //     })
      // }
    },
    //编辑
    handlePictureCardPreview(file) {
      this.$emit("PictureCard", file);
    },
    //背景色
    PictureEditBack(file) {
      this.$emit("PictureEditBack", file);
    },
  },
};
</script>

<style lang="scss">
.disBtn .el-upload--picture-card {
  display: none !important;
}
.el-upload-list__item-actions {
  opacity: 1 !important;
  height: 40px !important;
  // bottom: 0 !important;
  top: calc(100% - 40px) !important;
  background-color: rgba(0, 0, 0, 0.3) !important;
  span {
    display: inline !important;
  }
}
</style>